<template>
  <Navbar/>
<!--  顶部导航栏-->
  <div class="top">
    <div class="navBox">
      <ul class="topNav">
        <li
          v-for="item in tabNameList"
          :data-name="item.path"
          @click="getList(item)"
          :class="item.active?'isActive':''"
        >{{ item.name }}
        </li>
      </ul>
    </div>
  </div>
  <router-view></router-view>
  <Button/>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'Course',
});
</script>

<script setup lang="ts">
import type {tabNameItemType,tabNameListType} from './courseTs'
import {ref} from 'vue';
import router from '@/router';

const tabNameList = ref<tabNameListType>([
  {name: '会员专区', path: 'vip_zone', active: true},
  {name: '视频课', path: 'video_courses', active: false},
  {name: '直播课', path: 'live_courses', active: false},
  {name: '线下课', path: 'major_courses', active: false},
  {name: '专区', path: 'zone_list', active: false},
]);
//点击事件获取当前nav的name
const getList = (item:tabNameItemType) => {
  tabNameList.value.forEach(item => {
    item.active = false
  })
  item.active = true
  router.push({name:item.path})
};
</script>

<style lang="scss" scoped>
//顶部导航栏
.top {
  margin-top: 10px;
  display: flex;
  background-color: white;
  justify-content: center;
  .navBox {
    width: 1200px;
    height: 80px;
    display: flex;
    justify-content: center;

    .topNav {
      width: 1000px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        margin: 0 20px;
        padding: 20px 4px;
        font-size: 16px;
        cursor: pointer;
      }
      li.isActive {
        border-bottom: 2px solid black;
      }
    }
  }
}
</style>
